<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="slide in swiperSlides" :key="slide.id"
        ><img :src="slide.burl" alt=""
      /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "HomeBanner",
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: true,
      },
      swiperSlides: [],
    };
  },
  mounted() {
    api.banners().then((res) => {
      if (res.status == 200) {
        this.swiperSlides = res.data;
      }
    });
  },
};
</script>

<style>
</style>